/*
 * SocialSearch 0.1 - Javascript
 */

 var phpController = "php/ss_controller.php";

jQuery(document).ready(function($) {

	// elementi di interfaccia
	$(".column").sortable({
		items: '.source',
		connectWith: '.column',
		cancel: '.ui-button',
		placeholder: '.ui-state-highlight',
		distance: 10,		
		dropOnEmpty: true
	}).disableSelection();


	$(".source")
		.find(".source-header")
			.prepend('<div class="ui-state-default ui-corner-all ss-button"><span class="ui-icon ui-icon-triangle-1-n"></span></div>')
			.end();

	$(".source-header .ss-button").click(function() {
		$(this).find(".ui-icon").toggleClass("ui-icon-triangle-1-s");
		$(this).parents(".source:first").find(".source-content").toggle();
	});

	$(".ss-button:not(.ui-state-disabled)")
	.hover(
		function(){ 
			$(this).addClass("ui-state-hover"); 
		},
		function(){ 
			$(this).removeClass("ui-state-hover"); 
		}
	)
	
	// gestione ricerca
	$("#search-query").keyup(function(event){
		search();
		//if(event.keyCode == 13 /* invio */){
//			search();
		//}
	});
});



// effettua la ricerca
function search(){
	query = $("#search-query").val();

	// ----------- richieste ajax di prova -----------
	
	// Flickr
	$.post(phpController, {'source' : 'flickr', 'key' : query}, function(data) {

		// individuiamo gli elementi
		var xmlElements = $(data).find("element");
		
		var htmlOutput = "<div class='result'><h3>Flickr</h3><ul>";
		
		// cicliamo sui primi 3 elementi utilizzando l'helper di jQuery
		var $i = 0;
		xmlElements.each( function() {
			htmlOutput += "<li><img src='" + $(this).find("thumbnail").text() + "'/></li>";
			if(++$i >= 3) return false;			
		});
		
		htmlOutput += "</ul></div>";
		
		// pubblichiamo l'output
		$("#flickr1 .source-content").html(htmlOutput);
	});
	

	// Flickr in un'altra forma
	$.post(phpController, {'source' : 'flickr', 'key' : query}, function(data) {

		// individuiamo gli elementi
		var xmlElements = $(data).find("element");
		
		var htmlOutput = "<div class='result'><h3>Flickr impastato diversamente</h3>";
		
		// cicliamo sui primi 8 elementi utilizzando l'helper di jQuery
		$i = 0;
		xmlElements.each( function() {
			htmlOutput += "<span class='flickr-element'><img src='" + $(this).find("thumbnail").text() + "'/></span>";
			if(++$i >= 80) return false;
		});
		
		htmlOutput += "</div>";
		
		// pubblichiamo l'output
		$("#flickr2 .source-content").html(htmlOutput);
	});		

	// Flickr in terzo esperimento
	$.post(phpController, {'source' : 'flickr', 'key' : query}, function(data) {

		// individuiamo gli elementi
		var xmlElements = $(data).find("element");
		
		var htmlOutput = "<div class='result'><h3>Flickr impastato ancora diversamente</h3><ul>";
		
		// cicliamo sui primi 8 elementi utilizzando l'helper di jQuery
		$i = 0;
		xmlElements.each( function() {
			htmlOutput += "<li lass='flickr-title'><a href='" + $(this).find("url").text() + "'>" + $(this).find("title").text() + "</a></span></li>";
			if(++$i >= 6) return false;
		});
		
		htmlOutput += "</ul></div>";
		
		// pubblichiamo l'output
		$("#flickr3 .source-content").html(htmlOutput);
	});			
	
}

